<template >
  <div id="enroll-enter"
       v-if="activity.title">
    <c-title :hide="false"
             :text='activity.title'></c-title>
    <div class="goods_info">
      <div class="goodsImg">
        <img :src="activity.thumb"
             alt="">
      </div>
      <ul class="goods_text">
        <li class="sum_time">
          <span class="cash"
                v-if="activity.cash>0.00"><b>¥</b>{{activity.cash}}</span>
          <span class="left"
                v-if="activity.cash<=0.00">免费</span>
        </li>
        <li class="name"
            style="-webkit-box-orient: vertical;">{{activity.title}}</li>
        <li class="state wait"
            v-show="now<activity.registration_time">
          <span class="pag"><span class="pag-type">待开始<span class="tri-line"></span></span><span class="right">{{timestampToTime(activity.registration_time)}} 报名开始</span></span></span>
        </li>
        <li class="state now"
            v-show="activity.registration_time<=now&&now<activity.registration_end_time">
          <span class="pag"><span class="pag-type">报名中<span class="tri-line"></span></span><span class="right">{{timestampToTime(activity.registration_end_time)}}截止</span></span>
          <template v-if="show_set.count_show == '1'">
            <span class="pag-name">已报名: <font>{{count}}</font>/{{activity.limit||0}}</span>
          </template>
        </li>
        <li class="state over"
            v-show="now>=activity.registration_end_time">
          <span class="pag"><span class="pag-type">已结束<span class="tri-line"></span></span><span class="right">{{timestampToTime(activity.registration_end_time)}}截止</span></span>
          <template v-if="show_set.count_show == '1'">
            <span class="pag-name">已报名: <font>{{count}}</font>/{{activity.limit||0}}</span>
          </template>
        </li>
      </ul>
    </div>
    <ul class="info_list">
      <li>
        <i class="iconfont icon-qhm_record"></i>
        <span>{{timestampToTime(activity.start_time)}}至{{timestampToTime(activity.end_time)}}</span>
      </li>
      <li v-if="activity.address"
          @click="goToAdress">
        <i class="iconfont icon-zx_map_locate2"></i>
        <span class="boxAtit">{{activity.address}}</span>
        <i class="fa fa-angle-right"></i>
      </li>
      <li @click="toLecturer(activity)"
          v-if="activity.is_lecturer">
        <i class="iconfont icon-jiangshi1"></i>
        <span>{{activity.has_one_lecturer?activity.has_one_lecturer.real_name:''}}</span>
        <i class="fa fa-angle-right"></i>
      </li>
      <li v-if="activity.is_lecturer">
        <a :href="'tel:' + mobile">
          <i class="iconfont icon-dianhua"></i>
          <span>{{activity.has_one_lecturer?activity.has_one_lecturer.mobile:''}}</span>
        </a>
      </li>
    </ul>
    <div class="enroll_condition" v-if="show_set.apply_detail_show == '1'">
      <div class="title_box">
        <h2>报名情况</h2>
        <!-- <span @click="toSituation">查看详情</span> -->
        <div class="enroll_user">
          <div class="user_list">
            <div v-for="(item,index) in num"
                :key="index" v-if="index <= 4">
              <div class="user_box"
                  v-if="item.has_one_order&&item.has_one_order.status>=1 && item.has_one_member">
                <div class="user" :style="{right: index == num.length - 1 ? '' : -0.3 * ( num.length - index) + 'rem' , 'z-index': num.length - index}">
                  <img :src="item.has_one_member.avatar_image">
                </div>
                <!-- <span>{{item.has_one_member.nickname}}</span> -->
              </div>
            </div>
          </div>
        </div>
        <i class="fa fa-angle-right" @click="toSituation"></i>
      </div>
    </div>
    <div class="enroll_detail">
      <div class="title_box">
        <h2>活动详情</h2>
      </div>
      <div class="detail_con">
        <p v-html="activity.content"></p>
      </div>
    </div>
    <div class="bottom_btn"
         :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
      <ul class="icon_btn">
        <li @click="toHome">
          <i class="iconfont icon-home"></i>
          <span>首页</span>
        </li>
        <li @click="toMe">
          <i class="iconfont icon-huiyuan6"></i>
          <span>我的</span>
        </li>
        <li v-if="!status"
            @click="addPeention">
          <i class="iconfont icon-bc_like_normal"></i>
          <span>关注</span>
        </li>
        <li v-if="status"
            @click="cancel">
          <i class="iconfont icon-bc_like"></i>
          <span>已关注</span>
        </li>
      </ul>
      <button type="button"
        class="over"
        v-if="(activity.registration_time<=now&&now<activity.registration_end_time) && (count == activity.limit)">报名已报满</button>
      <template v-else>
        <button type="button"
              class="now"
              @click="toEnroll"
              v-show="activity.registration_time<=now&&now<activity.registration_end_time">立即报名</button>
        <button type="button"
                class="wait"
                v-show="now<activity.registration_time">报名待开始</button>
        <button type="button"
          class="over"
          v-show="now>=activity.registration_end_time">报名已结束</button>
      </template>

    </div>
  </div>
</template>

<script>
import enroll_entercontroller from './enroll_entercontroller';
export default enroll_entercontroller;
</script>

<style lang="scss" rel="stylesheet/scss">
  .detail_con * {
    max-width: 100%!important;
  }
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
#enroll-enter {
  padding-bottom: 60px;

  .goods_info {

    .goodsImg {
      width: 100%;
      overflow: hidden;
      background: #f2f2f2;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .goods_text {
      background: #fff;
      margin: 0.7rem 0.8rem;
      padding: 0.9rem 0.75rem;
      border-radius: 0.5rem;

      .sum_time {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.3rem;
        align-items: center;

        .left {
          font-size: 1rem;
          font-weight: bold;
          color: #F15353;
        }

        .cash {
          font-size: 0.95rem;
          font-weight: bold;
          color: #F15353;

          b {
            font-size: 0.8rem;
          }
        }

      }

      .name {
        max-height: 2.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: left;
        font-size: 0.9rem;
        font-weight: bold;
        color: #00001C;
      }

      .state {
        margin-top: 0.625rem;
        text-align: left;
        display: flex;
        align-items: center;
        font-size: 14px;
        justify-content: space-between;

      }

      .pag-name {
        font-size: 0.72rem;
        font-weight: 400;
        color: #6E6E79;
        white-space: nowrap;
      }

      .now {
        .pag {
          background-color: rgba(59, 179, 93, 0.1);
          border-radius: 0.25rem;
          margin-right: 0.625rem;
          font-weight: 500;
          height: 1.6rem;
          white-space: nowrap;
          .pag-type {
            background-color: #3BB35D;
            color: white;
            // padding: 0.3rem 0.8rem 0.3rem 0.6rem;
            border-radius: 0.5rem;
            display: inline-block;
            font-weight: bold;
            font-size: 0.8rem;
            // width: 3.6rem;
            padding: 0 0.6rem 0 0.5rem;
            height: 100%;
            line-height: 1.6rem;
            text-align: center;
            position: relative;

            .tri-line {
              background-color: #3BB35D;
              border-radius: 0 0.75rem 0.5rem 0.5rem;
              width: 0.65rem;
              height: 100%;
              position: absolute;
              right: -0.1rem;
              -webkit-transform: skew(175deg);
              transform: skew(173deg);
              bottom: 0rem;
              height: 1.6rem;
            }
          }

          .right {
            font-size: 0.75rem;
            color: #3BB35D;
            font-weight: 400;
            padding: 0.3rem 0.8rem 0.3rem 0.4rem;
            border-radius: 0.5rem;
          }
        }
      }

      .over {
        .pag {
          background-color: rgba(110, 110, 121, 0.1);
          border-radius: 0.25rem;
          margin-right: 0.625rem;
          font-weight: 500;
          height: 1.6rem;
          white-space: nowrap;
          .pag-type {
            background: #6E6E79;
            color: white;
            border-radius: 0.5rem;
            display: inline-block;
            font-weight: bold;
            font-size: 0.8rem;
            padding: 0 0.6rem 0 0.5rem;
            height: 100%;
            line-height: 1.6rem;
            text-align: center;
            position: relative;

            .tri-line {
              background-color: #6E6E79;
              border-radius: 0 0.75rem 0.5rem 0.5rem;
              width: 0.65rem;
              height: 100%;
              position: absolute;
              right: -0.1rem;
              -webkit-transform: skew(175deg);
              transform: skew(173deg);
              bottom: 0rem;
              height: 1.6rem;
              z-index: 1;
            }
          }

          .right {
            font-size: 0.75rem;
            color: #3B3B4A;
            font-weight: 400;
            padding: 0.3rem 0.8rem 0.3rem 0.4rem;
            border-radius: 0.5rem;
          }
        }
      }

      .wait {
        .pag {
          background-color: rgba(250, 109, 33, 0.1);
          border-radius: 0.25rem;
          margin-right: 0.625rem;
          font-weight: 500;
          height: 1.6rem;
          border-radius: 0.5rem;
          white-space: nowrap;
          .pag-type {
            background: #F96D20;
            color: white;
            border-radius: 0.5rem;
            display: inline-block;
            font-weight: bold;
            font-size: 0.8rem;
            padding: 0 0.6rem 0 0.5rem;
            height: 100%;
            line-height: 1.6rem;
            text-align: center;
            position: relative;

            .tri-line {
              background-color: #F96D20;
              border-radius: 0 0.75rem 0.5rem 0.5rem;
              width: 0.65rem;
              height: 100%;
              position: absolute;
              right: -0.1rem;
              -webkit-transform: skew(175deg);
              transform: skew(173deg);
              bottom: 0rem;
              height: 1.6rem;
              z-index: 1;
            }
          }

          .right {
            font-size: 0.75rem;
            color: #ffb126;
            font-weight: 400;
            padding: 0.3rem 0.8rem 0.3rem 0.4rem;
            border-radius: 0.5rem;
          }
        }
      }
    }
  }

  .info_list {
    background: #fff;
    margin: 0.7rem 0.8rem;
    padding: 1.1rem 0.75rem;
    border-radius: 0.5rem;

    li:last-child {
      margin-bottom: 0;
    }

    li {
      display: flex;
      align-items: center;
      position: relative;
      font-size: 0.75rem;
      font-weight: 400;
      margin-bottom: 0.9rem;

      span {
        color: #00001C;
      }

      .iconfont {
        color: #00001C;
        font-size: 0.8rem;
        margin-right: 0.3rem;
        font-weight: bold;
      }

      .icon-jiangshi1 {
        font-weight: normal;
      }

      .fa {
        position: absolute;
        right: 0;
        font-size: 1rem;
        color: #999;
      }

      a {
        display: flex;
        align-items: center;
      }

      .boxAtit {
        text-align: left;
        width: 95%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .enroll_condition {
    background: #fff;
    margin: 0.7rem 0.8rem;
    padding: 0.9rem 0.75rem;
    border-radius: 0.5rem;

    .title_box {
      line-height: 1.875rem;
      display: flex;
      align-items: center;
      position: relative;
      font-size: 0.95rem;
      font-weight: bold;
      color: #00001C;

      h2 {
        white-space: nowrap;
      }

      span {
        font-size: 14px;
        color: #999;
        position: absolute;
        right: 1.25rem;
      }

      .fa {
        font-size: 1.3rem;
        color: #999;
        position: absolute;
        right: 0;
      }

      .enroll_user {
        width: 100%;
        margin-right: 1.2rem;
        .user_list {
          display: flex;
          float: right;
          align-items: center;
          .user {
            display: flex;
            position: relative;
            img {
              width: 2.3rem;
              height: 2.3rem;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }

  .enroll_detail {
    background: #fff;
    margin: 0.7rem 0.8rem;
    padding: 0.4rem 0.75rem 0.8rem 0.75rem;
    border-radius: 0.5rem;

    .title_box {
      line-height: 1.875rem;
      display: flex;
      align-items: center;
      position: relative;
      font-size: 0.95rem;
      font-weight: bold;
      color: #00001C;

      h2 {
        white-space: nowrap;
      }

      span {
        font-size: 14px;
        color: #999;
        position: absolute;
        right: 1.25rem;
      }

      .fa {
        font-size: 20px;
        color: #999;
        position: absolute;
        right: 0;
      }
    }

    .detail_con {
      text-align: left;
      width: 100%;
    }
  }


  .bottom_btn {
    box-shadow: 0 -0.0625rem 0.25rem rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 3.0625rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    z-index: 99;
    .icon_btn {
      width: 14.5rem;
      padding: 0.25rem 1.2rem;
      display: flex;
      justify-content: space-between;
      font-size: 0.8rem;
      font-weight: 400;
      color: #6E6E79;

      li {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        i {
          color: #00001C;
          font-size: 1.3rem;
          font-weight: bold;
        }

        .icon-bc_like {
          color: #F15353;
        }
      }

      span {
        display: block;
        font-size: 12px;
        color: #666;
      }
    }

    .now {
      width: 19rem;
      border: none;
      background: #f15353;
      color: #fff;
      font-size: 16px;
      border-radius: 2rem;
      margin: 0.4rem 0.8rem 0.4rem 0;
    }

    .over {
      width: 19rem;
      border: none;
      background: #C8C8CC;
      color: #fff;
      font-size: 16px;
      border-radius: 2rem;
      margin: 0.4rem 0.8rem 0.4rem 0;
    }

    .wait {
      width: 19rem;
      border: none;
      background: #C8C8CC;
      color: #fff;
      font-size: 16px;
      border-radius: 2rem;
      margin: 0.4rem 0.8rem 0.4rem 0;
    }

    &.pcStyle {
      width: 375px;
    }
  }
}
</style>
